<template>
    <div class="gd-main">
        <!-- 班组合同 -->
        <el-tabs type="card" v-model="activeName">
            <el-tab-pane label="待签订合同" name="first"></el-tab-pane>
            <el-tab-pane label="已签订合同" name="second"></el-tab-pane>
        </el-tabs>
        <div class="gd-content">
            <!-- 启用缓存 -->
            <keep-alive>
                <component :is="currentRole" />
            </keep-alive>
        </div>
        <router-view />
    </div>
</template>

<script>
    //待签订合同(项目列表)
    import unsigned from './subcontractViews/unsigned';
    //已签订合同(项目列表)
    import signed from './subcontractViews/signed';
    
    export default {
        components: {
            unsigned,
            signed
        },
        data() {
            return {
                currentRole: 'unsigned',
                activeName: 'first'
            }
        },
        watch: {
            activeName: function(val) {
                if(val == 'first') {
                    this.currentRole = 'unsigned';
                } else {
                    this.currentRole = 'signed';
                }
            }
        }
    }
</script>

<style lang="less" scoped>
/deep/.el-tabs__header{margin:0;}
</style>